<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>qq音乐</title>
		<link rel="stylesheet" href="css/outstyle.css" />
		<style>
			*{
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="headbox">
			<div class="logobox"><img src="img/logo.png" /></div>
			<div class="yinyueguanbox"><a href="#" class="style1">音乐馆</a></div>
			<div class="wodebox"><a href="#" class="style2">我的音乐</a></div>
			<div class="kehuduanbox"><a href="#" class="style2">客户端</a></div>
			<div class="wodebox"><a href="#" class="style2">开放平台</a></div>
			<div class="vipbox"><a href="#" class="style2">VIP</a></div>
			<div class="rightbox">
				<div class="sousuobox"><span></span>
				<input type="text" placeholder="搜索音乐,MV,歌单,用户"></font>">
					<div class="fadajiangbox"><img src="img/fa.png"/></div>
				</div>
			<div class="denglubox"><button>登录</button></div>
			<div class="kaitongbox"><a href="#" class="style3">开通VIP</a></div>
			<div class="chongzhibox"><a href="#" style="color: white; text-decoration: none;padding-top: ;">充值</a></div>
			</div>
			<div class="shouyebox">
				<a href="#" class="style4">首页</a>
				<a href="#" class="style4">歌手</a>
				<a href="#" class="style4">新碟</a>
				<a href="#" class="style4">排行榜</a>
				<a href="#" class="style4">分类歌单</a>
				<a href="#" class="style4">电台</a>
				<a href="#" class="style4">MV</a>
				<a href="#" class="style4">数字专辑</a>
			</div>
			<div class="bigbox">
				<h2>歌单推荐</h2>
				<div class="tuijianbox">
				<a href="#" class="style5">为你推荐</a>
				<a href="#" class="style5">网络歌曲</a>
				<a href="#" class="style5">乐器</a>
				<a href="#" class="style5">背景音乐</a>
				<a href="#" class="style5">官方歌单</a>
				<a href="#" class="style5">情歌</a>
				</div>
				<div class="tupianbox">
					<a href="#" class="style6">
						<img src="1.webp" width="200px"/>
						<h4>怪齐少[碧梨]的音乐匣子女</h4>
						<p>播放量：115.9万</p>
					</a>
					<a href="#" class="style6">
						<img src="2.webp" width="200px"/>
						<h4>伤感emo片段：忍不住就红了眼眶</h4>
						<p>播放量：6274.9wan</p>
					</a>
					<a href="#" class="style6">
						<img src="3.webp" width="200px"/>
						<h4>我从不质疑真心，但真心瞬息万变</h4>
						<p>播放量：1032.4万</p>
					</a>
					<a href="#" class="style6">
						<img src="4.webp" width="200px"/>
						<h4>抖音最火热门歌曲（持续更新中）</h4>
						<p>播放量：1816.3万</p>
					</a>
					<a href="#" class="style6">
						<img src="5.webp" width="200px"/>
						<h4>天气都在变，更何况爱情呢？</h4>
						<p>播放量：1257.2万</p>
					</a>
				</div>
			<div class="dingweibox1"></div>
			<div class="dingweibox2"></div>
			<div class="xiaobox">
			<div class="yuanbox"></div>
			<div class="yuanbox"></div>
			<div class="yuanbox"></div>
			<div class="yuanbox"></div>
			<div class="yuanbox"></div>
			</div>
			<div class="bigbox2">
				<div class="dingweibox1"></div>
				<div class="dingweibox2"></div>
				<h2>新歌首发</h2>
				<button>播放全部</button>
				<div class="shouyebox">
					<a href="#" class="style5">最新</a>
					<a href="#" class="style5">内地</a>
					<a href="#" class="style5">港台</a>
					<a href="#" class="style5">欧美</a>
					<a href="#" class="style5">韩国</a>
					<a href="#" class="style5">日本</a>
				</div>
				<div class="tupianbox2">
					<div class="imgbox">
						<a href="#" >
							<img src="img/11.webp" width="90px"/>
							<h4>赫马弗洛狄忒斯</h4>
							<p>蒋敦豪</p>
						</a>
						
					</div>
					<div class="imgbox">
						<a href="#">
							<img src="img/22.webp" width="90px"/>
							<h4>守护狐妖小红娘</h4>
							<p>黄绮珊</p>
						</a>
					</div>
					<div class="imgbox">
						<a href="#">
						<img src="img/33.webp" width="90px"/>
						<h4>称为</h4>
						<p>黄子弘凡</p></a>
					</div>
					<div class="imgbox">
						<a href="#">
						<img src="img/44.webp" width="90px"/>
						<h4>醒</h4>
						<p>刘宇</p></a>
					</div>
					<div class="imgbox">
						<a href="#">
						<img src="img/55.webp" width="90px"/>
						<h4>如梦狐妖小红娘</h4>
						<p>张杰</p></a>
					</div>
					<div class="imgbox">
						<a href="#">
							<img src="img/66.webp" width="90px"/>
							<h4>楼外楼（live）</h4>
							<p>时代少年团</p>
						</a>
					</div>
					<div class="imgbox">
						<a href="#">
							<img src="img/77.webp" width="90px"/>
							<h4>同往（南玉卿心）</h4>
							<p>弦子</p>
						</a>
					</div>
					<div class="imgbox">
						<a href="#">
							<img src="img/88.webp" width="90px"/>
							<h4>天行健（天行健）</h4>
							<p>刘宇宁/傅箐</p>
						</a>
					</div>
					<div class="imgbox">
						<a href="#">
							<img src="img/99.webp" width="90px"/>
							<h4>WAR</h4>
							<p>喻言</p>
						</a>
					</div>
				</div>
				
				<div class="xiaobox">
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				</div>
			</div>
			<div class="bigbox3">
				<h2>精彩推荐</h2>
				<div class="changbox">
					<div class="boxa">
						<a href="#">
							<img src="img/a.jpg" width="450px"/>
						</a>
					</div>
					<div class="boxb">
						<a href="#">
							<img src="img/b.png" width="450px"/>
						</a>
					</div>
				</div>
				<div class="xiaobox">
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				</div>
			</div>
			<div class="bigbox4">
				<div class="dingweibox1"></div>
				<div class="dingweibox2"></div>
				<h2>新碟首发</h2>
				<div class="shouyebox2">
					<a href="#" class="style5">内地</a>
					<a href="#" class="style5">港台</a>
					<a href="#" class="style5">欧美</a>
					<a href="#" class="style5">韩国</a>
					<a href="#" class="style5">日本</a>
				</div>
				<div class="gengduobox">
					<a href="#" style="text-decoration: none;
					font-size: 16px;color: black;">更多</a>
				</div>
				<div class="tupianbox3">
					<a href="#" class="style8">
						<img src="img/T002R300x300M0000036i74s1cBaWO_1.webp" width="200px"/>
						<h4>缘</h4>
						<p>傅箐</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M000000Y19Bn21Tk57_1.webp" width="200px"/>
						<h4>重生之我在故乡</h4>
						<p>戈凡/清婉</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M000000FUqw24FCUtM_1.webp" width="200px"/>
						<h4>在故事之外</h4>
						<p>朱兴东</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M000002DtOxh1bT5qI_1.webp" width="200px"/>
						<h4>所以</h4>
						<p>吉克隽逸</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M000003zMwLc1HolV3_1.webp" width="200px"/>
						<h4>Sweet Dreams,My Dear</h4>
						<p>陈卓璇</p>
					</a>
				</div>		<!-- 图片的 -->
				<div class="tupianbox3">
					<a href="#" class="style8">
					<img src="img/奇妙恩赐.webp" width="200px"/>
					<h4>奇妙恩赐</h4>
					<p>陈慕涵</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M0000032VBhL0aTarA_1.webp" width="200px"/>
						<h4>红颜劫</h4>
						<p>尹昔眠</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M000003IA1041HoBUP_1.webp" width="200px"/>
						<h4>想哭就哭吧</h4>
						<p>成学迅</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M000000bApum1gGtSs_1.webp" width="200px"/>
						<h4>被遗忘的布谷鸟</h4>
						<p>阿吉太组合</p>
					</a>
					<a href="#" class="style8">
						<img src="img/T002R300x300M000001vuJhC4DgdPj_1.webp" width="200px"/>
						<h4>根本你不懂得爱我</h4>
						<p>车厘子的车车</p>
					</a>
				</div>
				<div class="xiaobox2">
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				</div>
			</div>
			<div class="bigbox5">
				<div class="dingweibox1"></div>
				<div class="dingweibox2"></div>
				<h2>排行榜</h2>
				<div class="gengduobox">
					<a href="#" style="text-decoration: none;
					font-size: 16px;color: black;">更多</a>
				</div>
				<div class="pinkbox">
					<h3>巅峰榜</h3>
					<h2>热歌</h2>
					<ol>
						<li>1 诺言（郭有才版）<br />郭有才</li>
						<li>2 若月亮没来<br />王宇宙Leto/乔俊丞</li>
						<br />
						<li>3 无名的人<br />毛不易</li>
					</ol>
				</div>
				<div class="hotpinkbox">
					<h3>巅峰榜</h3>
					<h2>新歌</h2>
					<ol>
						<li>1 诺言（郭有才版）<br />郭有才</li>
						<li>2 诺言（正式版）<br />海来阿木</li>
						<li>3 Spring Snow <br />10CM</li>
					</ol>
				</div>
				<div class="bluebox">
					<h3>巅峰榜</h3>
					<h2>流行指数</h2>
					<ol>
						<li>1 如果我们在余生相遇<br />RE-D/是二哈ya</li>
						<li>2 Spring Snow <br />10CM<</li>
						<li>3 真心很贵别逢人就给<br />任夏</li>
					</ol>
				</div>
				<div class="greenbox">
					<h3>巅峰榜</h3>
					<h2>欧美</h2>
					<ol>
						<li>1 Fortnight <br />Taylor Swift</li>
						<li>2 Moonlight <br />lan Asher/SB19</li>
						<li>3 These Walls(Explicit) <br />Dua Lipa</li>
					</ol>
				</div>
				<div class="deepgreenbox">
					<h3>巅峰榜</h3>
					<h2>韩国</h2>
					<ol>
						<li>1 Spring Snow <br />10CM</li>
						<li>2 SPOT!(feat.JENNE) <br />ZICO/JENNIE</li>
						<li>3 Supernova <br />aespa</li>
					</ol>
				</div>
			</div>
			<div class="bigbox4">
				<div class="dingweibox1"></div>
				<div class="dingweibox2"></div>
				<h2>MV</h2>
				<div class="shouyebox">
					<a href="#" class="style5">精选</a>
					<a href="#" class="style5">内地</a>
					<a href="#" class="style5">港台</a>
					<a href="#" class="style5">欧美</a>
					<a href="#" class="style5">韩国</a>
					<a href="#" class="style5">日本</a>
				</div>
				<div class="tupianbox3">
					<a href="#" class="style8">
						<img src="img/称为.webp" width="200px" height="105.46px"/>
						<h4>称为</h4>
						<p>黄子弘凡 <br />8.1万</p>
					</a>
					<a href="#" class="style8">
						<img src="img/同往.webp" width="200px" height="105.46px"/>
						<h4>同往</h4>
						<p>弦子 <br />1.0万</p>
					</a>
					<a href="#" class="style8">
						<img src="img/薄荷糖.jpg" width="200px" height="105.46px"/>
						<h4>薄荷糖（Mint Candy）</h4>
						<p>SNH48 <br />1.2万</p>
					</a>
					<a href="#" class="style8">
						<img src="img/奶酪.webp" width="200px" height="105.46px"/>
						<h4>SUHO</h4>
						<p>SUHO <br />8190</p>
					</a>
					<a href="#" class="style8">
						<img src="img/见习爱情.jpg" width="200px" height="105.46px"/>
						<h4>见习爱情</h4>
						<p>冯提莫 <br />5382</p>
					</a>
				</div>
				<div class="tupianbox3">
					<a href="#" class="style8">
						<img src="img/天灵灵.webp" width="200px" height="105.46px"/>
						<h4>天灵灵</h4>
						<p>FinesseBoy$/艾志恒Asen<br />1.2万</p>
					</a>
					<a href="#" class="style8">
						<img src="img/豹变.webp" width="200px" height="105.46px"/>
						<h4>豹变</h4>
						<p>莫文蔚/Karen Mok&The Masters <br />1.8万</p>
					</a>
					<a href="#" class="style8">
						<img src="img/曾经被遗忘的人.webp" width="200px" height="105.46px"/>
						<h4>曾经被遗忘的人</h4>
						<p>林晓峰<br />1.1万</p>
					</a>
					<a href="#" class="style8">
						<img src="img/chase.webp" width="200px" height="105.46px"/>
						<h4>Chase It</h4>
						<p>Bebe Rexha <br />1246</p>
					</a>
					<a href="#" class="style8">
						<img src="img/有生之年.webp" width="150px" height="105.46px"/>
						<h4>有生之年</h4>
						<p>李健<br />2.3万</p>
					</a>
				</div>
				<div class="xiaobox">
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				<div class="yuanbox"></div>
				</div>
			</div>
			<div class="jubaobox">
				<a href="#" style="text-decoration: none;
				display: inline-block;font-size: 16px;color: black;padding: 10px 5px;">举报</a>
			</div>
			<div class="fankuibox">
				<a href="#" style="text-decoration: none;
					display: inline-block;font-size: 16px;color: black;padding: 10px 5px;">反馈</a>
			</div>
			<div class="heibox">
				<h3>下载QQ音乐客户端 </h3>
				<h4 class="style9">特色产品</h4>
				<h4 class="style10">合作链接</h4>
			</div>
	</body>
</html>
